import $ from 'jquery';
import styles from './index.module.less';
import videoUrl from '../assets/movie.mp4';
import audioUrl from '../assets/music.mp3';

function init() {
    const container = $('<div>').addClass(styles.container).appendTo('#app');
    const vdo = $('<video>')
        .prop('src', videoUrl)
        .prop('autoplay', true)
        .prop('loop', true)
        .addClass(styles.video)
        .appendTo(container);
    const aud = $('<audio>')
        .prop('src', audioUrl)
        .prop('autoplay', true)
        .prop('loop', true)
        .appendTo(container);

    $('<h1>').text('豆瓣电影').addClass(styles.title).appendTo(container);

    $(window).on('scroll', function () {
        //滚动的高度
        const scrollTop = document.documentElement.scrollTop
        //屏幕的高度
        const vHeight = document.documentElement.clientHeight
        //如果滚动的高度小于，屏幕的高度，可以播放
        if (scrollTop >= vHeight) {
            vdo[0].pause();
            aud[0].pause();
        } else {
            vdo[0].play();
            aud[0].play();
        }
    })

}

init();

